<template>
  <div class="app-container">

    <!-- 搜索表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="selectedGrade" clearable placeholder="年级筛选">
          <el-option v-for="(value, index) in gradeList"
                     :key="index"
                     :label="value"
                     :value="index"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="selectedMonitor" clearable placeholder="班主任">
          <el-option v-for="(value, index) in monitorList"
                     :key="index"
                     :label="value"
                     :value="index"/>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" >查询</el-button>
      <el-button type="success" icon="el-icon-plus" @click="addClassInfo()">新增</el-button>
    </el-form>

    <!-- 展示表格 -->
    <el-table :data="classList" stripestyle="width:100%" >
      <el-table-column type="index"
                       width="50"
                       label="序号"
                       align="center"/>
      <el-table-column label="年级"
                       align="center">
        <template slot-scope="scope">
          <span>{{gradeList[scope.row.gradeId-1]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级"
                       align="center">
        <template slot-scope="scope">
          <span>{{scope.row.classId}}班</span>
        </template>
      </el-table-column>
      <el-table-column label="班主任信息" align="center">
        <el-table-column prop="realName"
                         label="姓名"
                         width="120"
                         align="center"/>
        <el-table-column label="性别"
                         width="120"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gender==0">女</span>
            <span v-else>男</span>
          </template>
        </el-table-column>
        <el-table-column prop="contactInfo"
                         label="联系方式"
                         width="300"
                         align="center"/>
      </el-table-column>
      <el-table-column label="操作" width="280" align="center">
       <template slot-scope="scope">
          <el-button type="primary" style="margin-left:5px" size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button type="danger" style="margin-left:5px" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
       </template>
      </el-table-column>
    </el-table>


    <!-- 详情 -->
    <el-drawer
      :title="classTitle"
      :visible.sync="drawer"
      size="35%"
      >
      <el-button type="info" @click="drawer = false">← 返回</el-button>
      <div class="drawer-table">
        <span>教师信息</span>
        <el-table :data="teacherList">
          <el-table-column prop="identityInfo"
                           label="担任职位"
                           width="200"/>
          <el-table-column prop="realName"
                           label="教师姓名"
                           width="200"/>
          <el-table-column prop="gender"
                           label="性别"
                           width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.gender==0">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="drawer-table">
        <span>学生信息</span>
        <el-table :data="studentList">
          <el-table-column prop="studentId"
                           label="学号"
                           width="200"/>
          <el-table-column prop="studentName"
                           label="姓名"
                           width="200"/>
          <el-table-column prop="gender"
                           label="性别"
                           width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.gender==0">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

    <!-- 新增表单 -->
    <el-dialog
               :title="isTeacherSelectorShow?'请为该班级指定老师':'请编辑班级信息'"
               :visible.sync="addFormVisible">
            <el-form :model="classInfoForm"
                     ref="classInfoRef"
                     :rules="classFormRules"
                     v-if="!isTeacherSelectorShow">
                <el-form-item label="年级" prop="gradeId" label-width="120px">
                    <el-select v-model="classInfoForm.gradeId"
                              placeholder="选择年级"
                              clearable>
                      <template v-for="(item, index) in gradeList">
                        <el-option :label="item" :value="index+1"></el-option>
                      </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级ID" prop="classId" label-width="120px">
                  <el-input v-model="classInfoForm.classId"
                            placeholder="班级ID，指明当前是第几班"
                            type="number"/>
                </el-form-item>
                <el-form-item label="班级名称" prop="className" label-width="120px">
                    <el-input v-model="classInfoForm.className"
                              placeholder=""/>
                </el-form-item>
            </el-form>
            <div class="teacher-selector" v-if="isTeacherSelectorShow">
              <el-button type="info"
                         style="margin-bottom: 20px"
                         @click="isTeacherSelectorShow = false">← 返回</el-button>
              <el-form>
                <template v-for="(identity, index) in identityList">
                  <el-form-item :label="identity"  label-width="120px">
                    <el-select v-model="selectedTeacherList[index]" placeholder="Select" size="large">
                      <el-option
                        v-for="item in allTeacherList[index]"
                        :key="item.userId"
                        :label="item.realName"
                        :value="item.userId"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="handleCancel">取 消</el-button>
              <el-button v-if="!isTeacherSelectorShow" type="primary" @click="handleClassSure">确 定</el-button>
              <el-button v-if="isTeacherSelectorShow" type="primary" @click="handleTeacherSure">提 交</el-button>
            </div>
        </el-dialog>

  </div>
</template>

<script>
import {
  getAllClassInfo,
  editClass,
  deleteClass, addTeacherToClass
} from '@/api/managementModule/classManagement';
import { addClass, getStudentsByClass } from '@/api/classManage';
import { getTeacherByIdentity, getTeacherByClass, getAllTeacher} from '@/api/teacher';
import {insertRuleInfo} from "@/api/fuRule";
export default {
  data(){
    return {
      // 年级选择框数据
      gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
      // 教师身份数组
      identityList: ['班主任', '语文老师', '数学老师', '英语老师', '美术老师', '体育老师'],
      selectedGrade: null,
      // 班主任选择框数据
      monitorList: [],
      selectedMonitor: null,
      // 班级基本信息
      classList: [],
      // 所有教师
      allTeacherList: [[], [], [], [], [], []],
      // 班级教师信息
      teacherList: [],
      // 学生信息
      studentList: [],
      searchObj: {}, // 条件搜索对象
      // 右侧弹出框标题
      classTitle: '',
      // 控制参数 -- 班级添加对话框弹出
      addFormVisible: false,
      // 控制参数 -- 右侧弹出框弹出
      drawer: false,
      // 控制参数 -- 班级添加框中班级信息与教师添加界面变换
      isTeacherSelectorShow: false,
      // 班级信息表单
      classInfoForm: {},
      // 班级负责老师列表
      selectedTeacherList: [],

      // 班级信息表单校验规则
      classFormRules: {
        gradeId: [{required: true, message: '请选择年级', trigger: 'blur'}],
        classId: [{required: true, message: '请选择班级', trigger: 'blur'}],
        className: [{required: true, message: '请输入班级名', trigger: 'blur'}],
      },
    }
  },
  mounted(){
    getAllClassInfo().then(res => {
      this.classList = res.data;
    });
    getAllTeacher().then(res => {
      res.data.forEach(teacher => {
        this.allTeacherList[teacher.identity-3].push(teacher);
      });
    });
  },
  methods: {
    addClassInfo(){
        this.addFormVisible = true;
    },
    handleCancel(){
      this.dialogFormVisible = false;
      this.addFormVisible = false;
      this.isTeacherSelectorShow = false;
      this.classInfoForm = {};
    },
    handleClassSure(){
      this.$refs.classInfoRef.validate((valid) => {
        if (valid) {
          this.classInfoForm.id = parseInt(this.classInfoForm.gradeId + '' + this.classInfoForm.classId);
          this.classInfoForm.classId = parseInt(this.classInfoForm.classId);
          this.isTeacherSelectorShow = true;
        } else {
          this.$message.error('请完善表单相关信息！');
          return false;
        }
      });

      // addClass(this.addForm).then(res => {
      //   this.$message({
      //         message: '添加成功',
      //         type: 'success'
      //       });
      //   })
      // this.addFormVisible = false;
    },
    handleTeacherSure() {
      let selectedTeacherList = [];
      let classInfoForm = this.classInfoForm;
      this.selectedTeacherList.forEach(teacher => {
        selectedTeacherList.push({gradeId: this.classInfoForm.gradeId, classId: this.classInfoForm.classId, teacherId: teacher});
      })
      addClass(classInfoForm).then(res => {
        addTeacherToClass(selectedTeacherList).then(res => {

        })
      })
      console.log(this.classInfoForm);
      console.log(selectedTeacherList);
    },
    selectTeacher() {
      console.log();
    },
    //查询该老师班级里的学生
    handleDetail(index, row){
      this.drawer = true;
      this.classTitle = this.gradeList[row.gradeId] + row.classId +`班成员信息`;
      getTeacherByClass(row.gradeId, row.classId).then(res => {
        this.teacherList = res.data
      });
      getStudentsByClass(row.gradeId, row.classId).then(res => {
        this.studentList = res.data
      });
    },

    handleSure(){
      this.form.classId = this.form.id;
      editClass(this.form).then(res => {
        this.$message({
            message: '修改成功',
            type: 'success'
          });
      })
      this.dialogFormVisible = false;
    },
    handleDelete(index, row){
      deleteClass({classId: row.id}).then(res => {
        this.$message({
            message: '删除成功',
            type: 'success'
          });
      })
    },
  }
}
</script>

<style scoped>
.drawer-table {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-top: solid 1px black;
  font-size: 20px;
  font-weight: bold;
}
</style>
